/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template> 
	<view>
		<view class="retail_order">
			<view class="order_tab clearfix">
				<view @tap="clickTab" class="order_tab_list ":class="[navIndex==0?'active':'']" data-current="0">全部订单</view>
				<view @tap="clickTab" class="order_tab_list":class="[navIndex==1?'active':'']"  data-current="1">未付款</view>
				<view @tap="clickTab" class="order_tab_list":class="[navIndex==2?'active':'']"  data-current="2">已付款</view>
				<view @tap="clickTab" class="order_tab_list":class="[navIndex==3?'active':'']"  data-current="3">已完成</view>
			</view>
			<view class="order_content">
				<block v-for="(item,index) in orderlist" :key="index">
					<view class="order_content_list">
						<view class="header clearfix wrap">
							<view class="buy_name">
								<image class="store-logo" :src="imgUrl+'cart/carnew.png'" role="img"></image>
								{{item.nickname}}
							</view>
							<view class="is_pay" v-if="item.status==0">未付款</view>
							<view class="is_pay" v-if="item.status==1">已付款</view>
							<view class="is_pay" v-if="item.status==2">等待分成(已收货)</view>
							<view class="is_pay" v-if="item.status==3">已分成</view>
							<view class="is_pay" v-if="item.status==4">已取消</view>
						</view>
						<view class="details">
							<block v-if="item.order_goods_list.length>1">
								<view class="product_info clearfix wrap">
									<image class="product_image" :src="hostUrl+'/mall/goods/thumb_image?goods_id='+ item.order_goods_list[0].goods_id+'&width=400&height=400'"
									 role="img"></image>
									 <image class="product_image" :src="hostUrl+'/mall/goods/thumb_image?goods_id='+ item.order_goods_list[1].goods_id+'&width=400&height=400'"
									  role="img"></image>
									  
									<view>...</view>   
									                      
									<view class='' style="float:right;">
										<view class='product_content_title'>共{{item.order_goods_list.length}}种商品 <image class="next_icon" src='distribut/qian@2x.png' ></image></view>                                      
									</view> 
								</view>
							</block>
							<block wx:else>               
								<view class='product_info clearfix wrap' v-for="(item2,index2) in item.order_goods_list" :key="index2">
								<image :src="hostUrl+'/mall/goods/thumb_image?goods_id='+ item2.goods_id+'&width=400&height=400'"
									  role="img" class='product_image'></image>
								<view class='product_content'>
									<view class="top">
									  <view class="left">{{item2.goods_name}}</view>
									  <view class="right">
										<view class="price">￥{{item2.member_goods_price}}</view>
										<view class="num">x{{item2.goods_num}}</view>
									  </view>
									</view>
									<view class="bottom">
										规格：{{item2.spec_key_name==""||item2.spec_key_name==undefined?"--":item2.spec_key_name}}
									</view>
								</view>
								</view>
							</block>
							<view class="product_detail wrap">
								<view class="line">
									<view class="left">订单号：</view>
									<view class="right">{{item.order_sn}}</view>
								</view>
								<view class="line">
									<view class="left">分销等级：</view>
									<view class="right" v-if="item.level==1">一级分销商</view>
									<view class="right" v-if="item.level==2">二级分销商</view>
									<view class="right" v-if="item.level==3">三级分销商</view>
									<view class="right" v-if="item.level==4">四级分销商</view>
								
								</view>
								<view class="line">
									<view class="left">下单时间：</view>
									<view class="right">{{item.create_time}}</view>
								</view>
								<view class="line bottom">
									<text>
										共{{item.order_goods_list.length}}件商品 实付款：
									</text>
									￥{{filter(item.goods_price)}}
									<text>
										获得佣金：
									</text>
									￥{{filter(item.money)}}
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
			<view class="no-data" v-if="!orderlist || orderlist.length == 0">
			    <image :src="imgUrl+'cart/cart-null.png'" class="cart-image"/>
			    <view class="no-data-title">没有找到相关的记录</view>
			    <navigator url="/pages/index/index" class="lookat" open-type="switchTab"> 去逛逛 </navigator>
			</view>
		</view>
		<!-- 公共底部 -->
		<distribut-footer :classInfo="classIndex"></distribut-footer>
	</view>
</template>

<script>
	import distributFooter from "../../../components/distributFooter/distributFooter.vue";
	import common from "@/common/common.js";
	import config from "@/api/config.js";
	import {getDistributionOrder} from "@/api/api.js";
	import {mapState} from 'vuex';
	export default {
		data() {
			return {
				hostUrl:config.host,
				imgUrl:config.imgUrl,
				classIndex:3,//0分销 1团队2账户3分销4网店
				navIndex:0,//
				orderlist:"",//订单列表
				total:"",
				params:{
					// status:"",  //0未付款 1,2已付款 3已完成  默认为空
					size:10,
				}
			};
		},
		components:{
			distributFooter
		},
		computed: {
			...mapState(['hasLogin'])
		},
		onShow(){
			// this.params.prom_type=6;
			if(this.hasLogin){
				this.getDistributionOrder(this.params);
			}else{
				common.toast("none","请登录",2000)
				
			}
			
		},
		methods:{
			/*分销订单*/ 
			getDistributionOrder(params){
				getDistributionOrder(params).then(res=>{
					console.log(res)
					res.records.forEach((i,index)=>{
						console.log(i)
						var time=common.format(i.create_time)
						i.create_time=time
					})
					this.orderlist=res.records;
					this.total=res.total;
				})
			},
			/*切换*/ 
			clickTab(e){
				console.log(e)
				let index=e.currentTarget.dataset.current;
				if(index==0){
					//全部
					// let params={
					// 	size:10,
					// }
					delete this.params.status  //删除status
					this.getDistributionOrder(this.params)
				}
				if(index==1){
					this.params.status=0;
					this.getDistributionOrder(this.params)
				}
				if(index==2){
					this.params.status="1,2";
					this.getDistributionOrder(this.params)
				}
				if(index==3){
					this.params.status=3;
					this.getDistributionOrder(this.params)
				}
				this.navIndex=index;
				
			},
			onReachBottom(){//下拉加载数据
				
				if(this.orderlist.length===this.total){
					common.toast("none","加载完了",2000)
					 return false;
				}
				this.params.size+=9;
				if(this.hasLogin){
					this.getDistributionOrder(this.params)
				}
				
				
			},
			/*保留两位小数*/
			filter(e) {
				let num = parseFloat(e).toFixed(2)
				return num;
			},
		}
	}
</script>

<style lang="scss">
	.next_icon {
		float: right;
		width: 18rpx;
		height: 32rpx;
		margin-top: 10rpx;
		margin-right: 15rpx;
		margin-left: 10rpx;
	}

	page {
		background-color: #f5f5f5
	}

	.clearfix:after {
		content: '.';
		display: block;
		height: 0;
		overflow: hidden;
		visibility: hidden;
		clear: both;
	}

	.wrap {
		width: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #f3f3f3;
	}

	.show {
		display: block;
	}

	.hidden {
		display: none;
	}

	.retail_order {
		background-color: #f5f5f5;
		margin-bottom: 85rpx;
	}

	.retail_order .order_tab {
		background: #ffffff;
		border-bottom: 1px solid #f3f3f3;
	}

	.retail_order .order_tab .order_tab_list {
		float: left;
		width: 25%;
		height: 80rpx;
		line-height: 76rpx;
		text-align: center;
		color: #333;
		font-size: 28rpx;
	}

	.retail_order .order_tab .order_tab_list.active {
		color: #ff3b3b;
		position: relative;
		font-weight: bold;
	}

	.retail_order .order_tab .order_tab_list.active::after {
		content: '';
		position: absolute;
		width: 50rpx;
		height: 4rpx;
		border-radius: 2rpx;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		background: #ff3b3b;
	}

	.retail_order .order_content .order_content_list {
		width: 710rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		border-radius: 10rpx;
		box-sizing: border-box;
		background: #fff;
	}

	.retail_order .order_content .order_content_list .header .buy_name {
		float: left;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		color: #666666;
	}

	.retail_order .order_content .order_content_list .header .is_pay {
		float: right;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 26rpx;
		color: #2DCC9A;
	}

	.retail_order .order_content .order_content_list .details .product_info {
		height: 190rpx;
		border-bottom: 1px solid #f3f3f3;
		padding: 20rpx 0 !important;
		margin: 0 20rpx;
		width: auto !important;
		box-sizing: border-box;
	}

	.retail_order .order_content .order_content_list .details .product_image {
		float: left;
		height: 150rpx;
		width: 150rpx;
		border-radius: 5rpx;
	}

	.retail_order .order_content .order_content_list .details .product_content {
		margin-left: 160rpx;
	}

	.product_content {
		width: 500rpx;
	}

	.product_content .top {
		width: 100%;
		height: 90rpx;
		box-sizing: border-box;
	}

	.product_content .top .left {
		width: 330rpx;
		float: left;
		color: #666666;
		margin: 10rpx 0rpx;
		line-height: 40rpx;
		font-size: 24rpx;
		box-sizing: border-box;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.product_content .top .right {
		width: 150rpx;
		float: right;
		margin: 10rpx 0rpx;
		color: #999999;
		font-size: 22rpx;
	}

	.product_content .top .right .price {
		height: 40rpx;
		line-height: 40rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-align: right;
	}

	.product_content .top .right .num {
		height: 40rpx;
		line-height: 40rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-align: right;
	}

	.product_content .bottom {
		color: #999999;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 22rpx;
		white-space: nowrap;
		text-align: left;
		overflow: hidden;
		width: 100%;
		text-overflow: ellipsis;
	}

	.retail_order .order_content .order_content_list .details .product_content .product_content_title {
		font-size: 26rpx;
		color: #333333;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.retail_order .order_content .order_content_list .details .product_content .norms {
		color: #999;
		font-size: 22rpx;
		margin-top: 5rpx;
	}

	/*.retail_order .order_content .order_content_list .details .product_content .price {
  margin-top: 30rpx;
  font-size: 30rpx;
  color: #1d1d1d;
}*/
	.retail_order .order_content .order_content_list .details .product_detail {
		height: 229rpx;
		box-sizing: border-box;
		padding: 10rpx 20rpx;
	}

	.product_detail .line {
		height: 55rpx;
		line-height: 55rpx;
	}

	.product_detail .line .left {
		width: 49.5%;
		float: left;
		text-align: left;
		font-size: 24rpx;
		color: #999999;
	}

	.product_detail .line .right {
		width: 49.5%;
		float: right;
		text-align: right;
		font-size: 24rpx;
		color: #666666;
	}

	.product_detail .bottom {
		text-align: right;
		color: #ff3b3b;
		font-size: 28rpx;
		line-height: 45rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.product_detail .bottom text {
		margin: 0rpx 10rpx 0 20rpx;
		font-size: 24rpx;
		color: #666;
	}

	.retail_order .order_content .order_content_list .details .product_detail .order_num {
		font-size: 22rpx;
		color: #666;
		height: 64rpx;
		line-height: 64rpx;
	}

	.retail_order .order_content .order_content_list .details .product_detail .order_time {
		font-size: 22rpx;
		color: #666;
		margin-bottom: 20rpx;
	}

	.retail_order .order_content .order_content_list .details .product_detail .product_total,
	.product_charge {
		font-size: 26rpx;
		color: #1f1f1f;
	}

	.product_total text,
	.product_charge text {
		font-weight: bold;
		color: #ff3b3b;
		margin-left: 10rpx;
	}

	.retail_order .order_content .order_content_list .details .divided {
		height: 15rpx;
		width: 100%;
		background-color: #f5f5f5;
	}

	.store-logo {
		height: 30rpx;
		width: 30rpx;
		border-radius: 25%;
		margin-right: 10rpx;
		vertical-align: top;
		position: relative;
		top: 25rpx;
	}
</style>
